import React, { Component } from 'react'
import { Menu } from 'antd';
import {Link} from 'react-router-dom'
import menus from '../../config/configMenus'
import { createFromIconfontCN } from "@ant-design/icons"
const IconFont = createFromIconfontCN({
  scriptUrl: "//at.alicdn.com/t/font_2481981_ijz7x3c0fyl.js"
})
const { SubMenu } = Menu;
export default class Sider extends Component {
  initMenus(list) {
    const array = list.map(item => {
      if(!item.children) {
        return (
          <Menu.Item key={item.key}>
            <IconFont type={item.icon}></IconFont>
            <Link to={item.key}>{item.title}</Link>
          </Menu.Item>
        )
      }else {
        return (
          <SubMenu key={item.title} icon={ <IconFont type={item.icon}></IconFont>}  title={item.title}>
            {this.initMenus(item.children)}
          </SubMenu>
        )
      }
    })
    return array;
  }
  render() {
    return (
      <div>
        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
          {this.initMenus(menus)}
            {/* <SubMenu key="sub1" icon={<UserOutlined />} title="产品管理">
              <Menu.Item key="1">基金</Menu.Item>
              <Menu.Item key="2">定期</Menu.Item>
              <Menu.Item key="3">活期</Menu.Item>
              <Menu.Item key="4">黄金</Menu.Item>
            </SubMenu>
            <SubMenu key="sub2" icon={<UserOutlined />} title="系统权限">
              <Menu.Item key="5">用户管理</Menu.Item>
              <Menu.Item key="6">角色管理</Menu.Item>
              <Menu.Item key="7">菜单管理</Menu.Item>
            </SubMenu>
            <Menu.Item key="8" icon={<FileOutlined />}>
              系统日志
            </Menu.Item>
            <SubMenu key="sub3" icon={<TeamOutlined />} title="系统设置">
              <Menu.Item key="9">字典管理</Menu.Item>
              <Menu.Item key="10">SQL监控</Menu.Item>
            </SubMenu>
            <Menu.Item key="11" icon={<FileOutlined />}>
              资讯管理
            </Menu.Item>
            <SubMenu key="sub4" icon={<TeamOutlined />} title="后台看板">
              <Menu.Item key="12">各类产品成交额占比数据图表</Menu.Item>
              <Menu.Item key="13">各类产品占比数据图表</Menu.Item>
              <Menu.Item key="14">理财产品在售占比数据图表</Menu.Item>
            </SubMenu> */}
          </Menu>
      </div>
    )
  }
}
